<template>
    <h2>使用计数器组件</h2>
    <Counter :init-count="counter1Init" @count-changed="counter1Changed"></Counter>
    <Counter :init-count="counter2Init" @count-changed="counter2Changed"></Counter>
    <div>
        计数器的和为：{{ sum }}
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Counter from '@/components/Counter.vue';

const counter1Init = 5;
const counter2Init = 3;
const counter1Value = ref(counter1Init);
const counter2Value = ref(counter2Init);

const sum = computed(() => {
    return counter1Value.value + counter2Value.value;
})

function counter1Changed(newCounter1Value) {
    counter1Value.value = newCounter1Value;
}

function counter2Changed(newCounter2Value) {
    counter2Value.value = newCounter2Value;
}
</script>